<template>
  <el-dialog :before-close="handleClose"
             :close-on-click-modal="false"
             :visible="reportDialogVisible"
             title="交班销售报表"
             @close="handleClose"
             @open="handleOpen">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="title">{{ reportTitle }}</span>
        <div>
          <el-button style="float:right;padding: 10px;" type="primary" @click="getLatestReport">重新获取</el-button>
<!--          <el-button style="float:right;padding: 10px;margin-right: 15px;" type="warning" @click="handleExportReport">-->
<!--            导出报表-->
<!--          </el-button>-->
        </div>
      </div>
      <!-- 订单汇总统计 -->
      <el-table :data="reportData.fuelReports || []" border style="width: 100%">
        <el-table-column align="center" label="订单汇总统计">
          <el-table-column align="center" label="油品" prop="name"/>
          <el-table-column align="center" label="收款笔数" prop="quantity"/>
          <el-table-column align="center" label="订单金额" prop="amount"/>
          <el-table-column align="center" label="加油量" prop="litre"/>
        </el-table-column>
      </el-table>
      <!-- 便利店消费金额统计 -->
      <el-table :data="shiftStorePayReports|| []" border style="width: 100%">
        <el-table-column align="center" label="便利店消费金额统计">
          <el-table-column align="center" label="数量" prop="quantity"/>
          <el-table-column align="center" label="订单金额" prop="sumPayAmount"/>
        </el-table-column>
      </el-table>
      <!-- 储值卡充值统计 -->
      <el-table :data="shiftCardRechargeReports || []" border style="width: 100%">
        <el-table-column align="center" label="储值卡充值统计">
          <el-table-column align="center" label="数目" prop="quantity"/>
          <el-table-column align="center" label="充值金额" prop="amount"/>
        </el-table-column>
      </el-table>
      <!-- 明细汇总 -->
      <el-table :data="shiftSaleInfoReports || []" border style="width: 100%">
        <el-table-column align="center" label="明细汇总">
          <el-table-column align="center" label="油品优惠" prop="fuelDiscountAmount"/>
          <el-table-column align="center" label="便利店优惠" prop="storeDiscountAmount"/>
          <el-table-column align="center" label="优惠总额" prop="discountTotal"/>
          <el-table-column align="center" label="收款汇总" prop="payAmountTotal"/>
        </el-table-column>
      </el-table>
      <!-- 销售统计 -->
      <el-table :data="reportData.shiftSaleReport || []" border style="width: 100%">
        <el-table-column align="center" label="其他数据">
          <el-table-column align="center" label="新增会员人数" prop="registerCount"/>
          <el-table-column align="center" label="积分赠送数量" prop="pointsFuelIncreaseNum"/>
          <el-table-column align="center" label="积分兑换数量" prop="pointsExchangeTotal"/>
        </el-table-column>
      </el-table>
    </el-card>
  </el-dialog>
</template>

<script>
import {mapGetters} from 'vuex'
import moment from 'moment'
import {shiftReport} from '@/api/user'

export default {
  name: 'Report',
  data () {
    return {
      nowTime: '',
      reportData: {}
    }
  },
  computed: {
    reportTitle () {
      return this.stationName + '【' +
          (this.shiftInfo ? this.shiftInfo.shiftName : '') + '】' +
          (this.shiftInfo ? this.shiftInfo.startDate : '') + ' 至 ' + this.nowTime
    },
    ...mapGetters([
      'shiftInfo',
      'stationName',
      'stationId',
      'reportDialogVisible',
      'saleCommodityList'
    ]),

    shiftStorePayReports () {
      let dataList = []
      let quantity = 0
      let sumPayAmount = 0
      if (this.reportData.storePaySumReports !== undefined) {
        quantity = this.saleCommodityList.length
        sumPayAmount = this.saleCommodityList.reduce((pre, item) => {
          return item.amount + pre
        }, 0)
      }
      dataList.push({
        'quantity': quantity,
        'sumPayAmount': sumPayAmount
      })
      return dataList
    },
    shiftSaleInfoReports () {
      let dataList = []
      let fuelDiscountAmount = 0
      let payAmountTotal = 0
      // 油品优惠
      if (this.reportData.fuelReports !== undefined) {
        fuelDiscountAmount = this.reportData.fuelReports.reduce((pre, item) => {
          return Number(item.discountAmount) + pre
        }, 0)
      }
      // 便利店优惠
      const storeDiscountAmount = this.saleCommodityList.reduce((pre, item) => {
        return Number(item.couponDiscount) + pre
      }, 0)
      // 优惠总额
      const discountTotal = fuelDiscountAmount + storeDiscountAmount
      // 收款汇总
      if (this.reportData.shiftPaySumReports !== undefined) {
        payAmountTotal = this.reportData.shiftPaySumReports[0].sumPayAmount
      }
      dataList.push({
        'fuelDiscountAmount': fuelDiscountAmount.toFixed(2),
        'storeDiscountAmount': storeDiscountAmount.toFixed(2),
        'discountTotal': discountTotal.toFixed(2),
        'payAmountTotal': payAmountTotal
      })
      return dataList
    },
    shiftCardRechargeReports () {
      const dataList = []
      if (this.reportData.shiftCardRechargeReports !== undefined) {
        let quantity = this.reportData.shiftCardRechargeReports.reduce((pre, item) => {
          return item.quantity + pre
        }, 0)
        let amount = (this.reportData.shiftCardRechargeReports.reduce((pre, item) => {
          return Number(item.payAmount) + pre
        }, 0)).toFixed(2)
        dataList.push({
          'quantity': quantity,
          'amount': amount
        })
      }
      return dataList
    }
  },
  mounted () {
    this.nowTime = moment().format('YYYY-MM-DD HH:mm:ss')
  },
  methods: {
    getLatestReport () {
      this.nowTime = moment().format('YYYY-MM-DD HH:mm:ss')
      shiftReport(this.stationId).then(res => {
        console.log(res)
        this.reportData = res.data
        this.$message.success(res.msg || '查询成功')
      }).catch(err => {
        console.log(err)
      })
    },
    handleExportReport () {
      console.log('handleExportReport')
      this.$message.warning('正在开发中...')
    },
    handleClose () {
      this.$store.dispatch('hideReportDialog')
    },
    handleOpen () {
      this.getLatestReport()
      this.$store.dispatch('showReportDialog')
    },
    renderHeader (h, {column, $index}, index) {
      var arr = column.label.split(' ')
      return [h('p', {}, [arr[0]]), h('p', {}, [arr[1] || ''])]
    }
  }
}
</script>

<style scoped>
.box-card {
  margin: 0 auto;
  height: 800px;
  overflow-y: auto;
}

.clearfix:before, .clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.title {
  font-size: 20px;
  font-weight: bold;
  line-height: 36px;
}
</style>